<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="001" style="border: 1px solid red; padding: 48px">
      1
      <div id="002" style="border: 1px solid blue; padding: 48px">2</div>
    </div>
    <script>
      const div2 = document.getElementById('002');
      div2.addEventListener('click', (e) => {
        // e.stopPropagation();
        console.log('我是2的事件处理函数', e);
      });
      const div1 = document.getElementById('001');
      div1.addEventListener('click', (e) => {
        // e.stopPropagation();
        console.log('我是1的事件处理函数', e);
        // console.log('e.target', e.target);
        // console.log('e.currentTarget', e.currentTarget);
      });
      document.addEventListener('click', (e) => {
        console.log('我是document的事件处理函数', e);
        // console.log('e.target', e.target);
        // console.log('e.currentTarget', e.currentTarget);
      });
      // window.addEventListener('click', (e) => {
      //   console.log('我是window的事件处理函数', e);
      //   console.log('e.target', e.target);
      //   console.log('e.currentTarget', e.currentTarget);
      // });
    </script>
  </body>
</html>
